<script setup>
import my_img from "../../components/my_img.vue"
import { animate, stagger } from "motion-v"
import { ref, onMounted, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
const Ref_Container = ref(null)

const list = ['Lsy', 'welcomes', 'you', 'to', 'visit', 'this', 'website']

onMounted(() => {
    setTimeout(() => {
        proxy.$nextTick(() => {
            Ref_Container.value.style.visibility = "visible"
            for (let i in list) {
                const ref_ = proxy.$refs[`CardRef${Number(i) + 1}`][0]
                ref_.style.visibility = "visible"
                animate(
                    ref_,
                    { opacity: [0, 1], y: [10, 0] },
                    {
                        type: "spring",
                        duration: ((Number(i) + 1) * 4) / 10,
                        bounce: 0,
                        delay: stagger(0.05),
                    }
                )
            }
        })
    }, 1000)
})
</script>

<template>
    <div>
        <div class="container" ref="Ref_Container">
            <div style="margin-left: 10px;" :style="{ color: index == 0 ? 'var(--theme-color2)' : '#000' }"
                :ref="`CardRef${index + 1}`" v-for="(item, index) in list" :key="index">
                {{ item }}
            </div>
        </div>
        <my_img className="welcomes-img" srcName="src/assets/imgs/welcomes.png" altName="welcomes"></my_img>
    </div>
</template>

<style scoped lang="scss">
.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 310px;
    visibility: hidden;
    font-family: 'Cute';
    font-size: 30px;
    margin-left: 180px;
    padding-top: 100px;
}
</style>
